<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!--引入JS-->
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/webuploader/0.1.5/webuploader.js"></script>
{{--    <script type="text/javascript" src="/lib/jquery/1.9.1/jquery.js"></script>--}}
{{--    <script type="text/javascript" src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script>--}}
<!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/lib/webuploader/0.1.5/webuploader.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <style>
        body{
            width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<form method="post" action="{{url('add')}}">
    @csrf
    <div class="form-group">
        <label>充电桩编号</label>
        <input type="text" class="form-control" id="numer" name="numer">
    </div>
    <div class="form-group">
        <label>充电桩名称</label>
        <input type="text" class="form-control" id="name" name="name">
    </div>
    <div class="form-group">
        <label>终端类型</label>
        <select class="form-control" id="type" name="type">
            <option value="1">直流</option>
            <option value="2">交流</option>
        </select>
    </div>
    <div class="form-group">
        <label>终端IMEI</label>
        <input type="text" class="form-control" id="imei" name="imei">
    </div>
    <div class="form-group">
        <label>充电端口</label>
        <select class="form-control" id="port" name="port">
            <option value="1">3124</option>
            <option value="2">435234</option>
        </select>
    </div>
    <div class="form-group">
        <label>额定功率</label>
        <input type="text" class="form-control" id="kw" name="kw">
    </div>
    <div class="form-group">
        <label>额定电流</label>
        <input type="text" class="form-control" id="dian" name="dian">
    </div>
    <div class="form-group">
        <label>品牌</label>
        <select class="form-control" id="brand" name="brand">
            <option value="1">2007A</option>
            <option value="2">2007B</option>
        </select>
    </div>
    <div class="form-group">
        <label>型号</label>
        <select class="form-control" id="num_type" name="num_type">
            <option value="1">2007A</option>
            <option value="2">2007B</option>
        </select>
    </div>
    <div class="form-group">
        <label>备注</label>
        <input type="text" class="form-control" id="content" name="content">
    </div>
    <div class="form-group">
        <label>状态</label>
        <select class="form-control" id="status" name="status">
            <option value="1">启用</option>
            <option value="0">禁用</option>
        </select>
    </div>
    <div class="form-group">
        <label>创建人</label>
        <input type="text" class="form-control" id="creater" name="creater">
    </div>
    <div id="uploader" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id='fileList'>
                <div id="imgPicker">选择充电桩图片</div></div>
        </div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
<script src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script src="/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script src="/lib/jquery.validation/1.14.0/validate-methods.js"></script>

<script>
    $('#add').validate({
        rules:{
            numer:{
                required:true,
                unique:true,
            },
            name:{
                required: true,
            },
            type:{
                required: true,
            },
            imei:{
                required: true,
            },
            port:{
                required: true,
            },
            kw:{
                required: true,
            },
            dian:{
                required: true,
            },

        },
        onkeyup:false,
        focusCleanup:true,
        success:"valid",
        submitHandler:function (form) {
            $(form).ajaxSubmit({
                url:'{{url('add')}}',
                method:'post',
                success:function (res) {
                    console.log(res)
                }
            })
        }
    })
    var $list = $("#fileList");
    var uploader = WebUploader.create({
        auto:true,//自动上传
        // swf文件路径
        swf: '/lib/webuploader/0.1.5/Uploader.swf',
        // swf: 'http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf',
        // 文件接收服务端。
        // server: 'http://webuploader.duapp.com/server/fileupload.php',
        server:"{{url('add')}}",
        formData:{_token:'{{csrf_token()}}'},
        method:"POST",
        fileVal:'file',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: "#imgPicker",
        chunked:false,//分片处理
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        thumb:{
            width: 110,
            height: 110,

            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 70,

            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: true,

            // 是否允许裁剪。
            crop: true,

            // 为空的话则保留原有图片格式。
            // 否则强制转换成指定的类型。
            type: 'image/jpeg'
        },
    })

</script>
